<template>
  <!-- 转账容器 -->
  <div class="transfer-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1>转账</h1>
      <p>快捷、安全地进行账户间转账</p>
    </div>

    <!-- 转账表单卡片 -->
    <el-card class="transfer-form-card" shadow="hover">
      <el-form
          ref="transferFormRef"
          :model="transferForm"
          :rules="rules"
          label-width="120px"
          class="transfer-form"
      >
        <!-- 转出账户 -->
        <el-form-item label="转出账户" prop="fromAccount">
          <el-input
              v-model="transferForm.fromAccount"
              placeholder="请输入转出账号"
              clearable
          />
        </el-form-item>

        <!-- 转入账户 -->
        <el-form-item label="转入账户" prop="toAccount">
          <el-input
              v-model="transferForm.toAccount"
              placeholder="请输入转入账号"
              clearable
              @blur="checkAccountValidity"
          />
          <!-- 账户信息展示 -->
          <div class="account-info" v-if="toAccountInfo">
            <p>户名：{{ toAccountInfo.accountHolder }}</p>
            <p>开户行：{{ toAccountInfo.bankName }}</p>
          </div>
        </el-form-item>

        <!-- 转账金额 -->
        <el-form-item label="转账金额" prop="amount">
          <el-input-number
              v-model="transferForm.amount"
              placeholder="请输入转账金额"
              :min="0.01"
              step="0.01"
              clearable
          />
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleTransfer">确认转账</el-button>
          <el-button @click="handleReset" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";

const transferFormRef = ref(null);
const transferForm = reactive({
  fromAccount: "", // 转出账户卡号
  toAccount: "", // 转入账户卡号
  amount: 0, // 转账金额
});
const toAccountInfo = ref(null); // 转入账户信息

// 表单校验规则
const rules = {
  fromAccount: [
    { required: true, message: "请输入转出账户", trigger: "blur" },
  ],
  toAccount: [{ required: true, message: "请输入转入账户", trigger: "blur" }],
  amount: [
    {
      required: true,
      message: "请输入转账金额",
      trigger: "blur",
    },
    {
      type: "number",
      message: "金额需为数字",
      trigger: "blur",
    },
  ],
};

// 模拟校验转入账户有效性（实际项目中应替换为真实接口请求）
// const checkAccountValidity = async () => {
//   if (!transferForm.toAccount) return;
//
//   // 这里模拟接口返回，实际要替换成真实接口请求
//   const mockRes = {
//     data: {
//       accountHolder: "模拟户名",
//       bankName: "模拟开户行",
//     },
//   };
//   toAccountInfo.value = mockRes.data;
//   ElMessage.success("账户信息校验通过（模拟）");
// };

// 转账处理函数
const handleTransfer = async () => {
  try {
    await transferFormRef.value.validate();

    // 构建请求体
    const transferDto = {
      cardId1: transferForm.fromAccount,
      cardId2: transferForm.toAccount,
      amount: transferForm.amount,
    };

    // 调用后端接口实现转账
    try {
      const response = await axios.post(
          "http://localhost:8088/api/transactions/transfer",
          transferDto
      );
      ElMessage.success(response.data);
      handleReset();
    } catch (error) {
      console.error("转账请求失败:", error);
      ElMessage.error("转账失败，请检查信息后重试");
    }
  } catch (error) {
    ElMessage.error("转账失败，请检查信息后重试");
  }
};

// 重置表单
const handleReset = () => {
  transferFormRef.value.resetFields();
  toAccountInfo.value = null;
};
</script>

<style scoped>
/* 容器样式 */
.transfer-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 0 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 30px;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
.page-header p {
  font-size: 14px;
  color: #999;
}

/* 表单卡片 */
.transfer-form-card {
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 表单间距 */
.transfer-form :deep(.el-form-item) {
  margin-bottom: 20px;
}

/* 账户信息展示 */
.account-info {
  margin-top: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}
.account-info p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

/* 按钮间距 */
.transfer-form :deep(.el-button) {
  margin-right: 10px;
}
</style>